
<template>
  <div class="container">
    <div class="top-part">
      <a-tooltip
        class="operate-item"
        placement="bottom"
        title="最小化"
        @click="minimize"
      >
        <minus-outlined />
      </a-tooltip>

      <a-tooltip
        class="operate-item"
        v-if="!fullscreen"
        placement="bottom"
        title="全屏"
        @click="maximize"
      >
        <fullscreen-outlined />
      </a-tooltip>
      <!-- 需要切换显示图标 -->
      <a-tooltip
        class="operate-item"
        v-else
        placement="bottom"
        @click="unmaximize"
        title="退出全屏"
      >
        <fullscreen-exit-outlined />
      </a-tooltip>

      <a-tooltip
        class="operate-item"
        placement="bottom"
        title="关闭"
        @click="close"
      >
        <close-outlined />
      </a-tooltip>
    </div>

    <div class="content-part">
      <myVideo />
    </div>
  </div>
</template>
<script setup name="app">
import myVideo from "./components/myVideo.vue";
import {ref} from 'vue'
import { ipcRenderer } from 'electron'

const fullscreen=ref(false)
// 全屏
const maximize = () => {
  fullscreen.value = true;
  ipcRenderer.send("window-maximize");
};
// 不全屏

const unmaximize = () => {
  fullscreen.value = false;
  ipcRenderer.send("window-unmaximize");
};
//最小化
const minimize = () => {
  ipcRenderer.send("window-minimize");
};
// 关闭
const close = () => {
  ipcRenderer.send("window-close");
};
</script>
<style scoped lang='scss'>
.container {
  width: 100%;
  height: 100vh;
  position: relative;

  .top-part {
    position: absolute;
    z-index: 999;
    top: 0px;
    width: 100%;
    /* 高度自行调整 */
    height: 30px;
    /* 拖拽 */
    -webkit-app-region: drag;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .operate-item {
      margin-right: 15px;
      cursor: pointer;
      -webkit-app-region: no-drag;
    }
  }
  .content-part {
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 30px;

    bottom: 0;
  }
}
</style>
